<template>
  <el-aside class="index-aside" height="100vh" width="210px">
    <div class="index-aside-inner menulist" style="height:100%">
      <div v-for="item in menuList" :key="item.roleName" v-if="role==item.roleName" class="menulist-item" style="height:100%;border:0;background-color:#ffffff">
        <div class="menulistImg" style="backgroundColor:#ff0000;padding:25px 0" v-if="false && menulistStyle == 'vertical'">
          <el-image v-if="false" :src="false" fit="cover" />
        </div>
        <el-menu mode="vertical" :unique-opened="true" class="el-menu-demo" style="height:100%;" background-color="#ffffff" text-color="#1e293b" active-text-color="#00BFFF" default-active="0">
          <el-menu-item :index="0" :style="menulistBorderBottom" @click="menuHandler('')">
            <i v-if="true" class="el-icon-s-home" />首页
          </el-menu-item>
          <el-submenu :index="1+''" :style="menulistBorderBottom">
            <template slot="title">
              <i v-if="true" class="el-icon-user-solid" />
              <span>个人中心</span>
            </template>
            <el-menu-item :index="1-1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
            <el-menu-item :index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
          </el-submenu>
          <template v-for="(menu, index) in item.backMenu">
            <el-submenu v-if="menu.child && menu.child.length" :style="menulistBorderBottom" :key="'submenu-' + menu.menu" :index="index+2+''">
            <template slot="title">
                <i v-if="true" :class="icons[index]" />
                <span>{{ menu.menu }}</span>
              </template>
              <el-menu-item v-for="(child, sort) in menu.child" :key="'child-' + sort" :index="(index+2)+'-'+sort" @click="menuHandler(child.tableName)">
                {{ child.menu }}
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :style="menulistBorderBottom" :key="'item-' + menu.menu" :index="index+2+''" @click="menuHandler(menu.tableName)">
              <i v-if="true" :class="icons[index]" />
              <span>{{ menu.menu }}</span>
            </el-menu-item>
            </template>
        </el-menu>
      </div>
    </div>
  </el-aside>
</template>
<script>
import menu from '@/utils/menu'
export default {
  data() {
    return {
      menuList: [],
      dynamicMenuRoutes: [],
      role: '',
      icons: [
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-fold',
        'el-icon-s-unfold',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-custom',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check',
        'el-icon-s-grid',
        'el-icon-menu',
        'el-icon-chat-dot-square',
        'el-icon-message',
        'el-icon-postcard',
        'el-icon-position',
        'el-icon-microphone',
        'el-icon-close-notification',
        'el-icon-bangzhu',
        'el-icon-time',
        'el-icon-odometer',
        'el-icon-crop',
        'el-icon-aim',
        'el-icon-switch-button',
        'el-icon-full-screen',
        'el-icon-copy-document',
        'el-icon-mic',
        'el-icon-stopwatch',
      ],
      menulistStyle: 'vertical',
	  menulistBorderBottom: {},
    }
  },
  mounted() {
    const menus = menu.list()
    this.menuList = menus
    this.role = this.$storage.get('role')
  },
  created(){
    setTimeout(()=>{
      this.menulistStyleChange()
    },10)
    this.icons.sort(()=>{
      return (0.5-Math.random())
    })
	this.lineBorder()
  },
  methods: {
	lineBorder() {
		let style = 'vertical'
		let w = '1px'
		let s = 'solid'
		let c = '#ccc'
		if(style == 'vertical') {
			this.menulistBorderBottom = {
				borderBottomWidth: w,
				borderBottomStyle: s,
				borderBottomColor: c
			}
		} else {
			this.menulistBorderBottom = {
				borderRightWidth: w,
				borderRightStyle: s,
				borderRightColor: c
			}
		}
	},
    menuHandler(name) {
      let router = this.$router
      name = '/' + name
      if (this.$route.path === name) {
        // 已经在当前页面，不再跳转
        return
      }
      router.push(name)
    },
    // 菜单
    setMenulistHoverColor(){
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist .el-menu-item').forEach(el=>{
          el.addEventListener("mouseenter", e => {
            e.stopPropagation()
            el.style.backgroundColor = "#f8fafc"
          })
          el.addEventListener("mouseleave", e => {
            e.stopPropagation()
            el.style.backgroundColor = "#ffffff"
          })
          el.addEventListener("focus", e => {
            e.stopPropagation()
            el.style.backgroundColor = "#f8fafc"
          })
        })
        document.querySelectorAll('.menulist .el-submenu__title').forEach(el=>{
          el.addEventListener("mouseenter", e => {
            e.stopPropagation()
            el.style.backgroundColor = "#f8fafc"
          })
          el.addEventListener("mouseleave", e => {
            e.stopPropagation()
            el.style.backgroundColor = "#ffffff"
          })
        })
      })
    },
    setMenulistIconColor() {
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el=>{
          el.style.color = "#1e293b"
        })
      })
    },
    menulistStyleChange() {
      this.setMenulistIconColor()
      this.setMenulistHoverColor()
      this.setMenulistStyleHeightChange()
      let str = "vertical"
      if("horizontal" === str) {
        this.$nextTick(()=>{
          document.querySelectorAll('.el-container .el-container').forEach(el=>{
            el.style.display = "block"
            el.style.paddingTop = "60px"
          })
          document.querySelectorAll('.el-aside').forEach(el=>{
            el.style.width = "100%"
            el.style.height = "60px"
            el.style.paddingTop = '0'
          })
          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
            el.style.paddingTop = '0'
          })
        })
      }
      if("vertical" === str) {
        this.$nextTick(()=>{
          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
            el.style.paddingTop = "60px"
          })
        })
      }
    },
    setMenulistStyleHeightChange() {
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el=>{
          el.style.height = "60px"
          el.style.lineHeight = "60px"
        })
        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el=>{
          el.style.height = "60px"
          el.style.lineHeight = "60px"
        })
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.index-aside {
  background-color: #ffffff;
  box-shadow: 2px 0 10px rgba(0,0,0,0.05);
  position: relative;
  z-index: 110;
  
  .index-aside-inner {
    height: 100%;
    padding-top: 60px;
    
    .el-menu {
      border-right: none;
      
      .el-menu-item, .el-submenu__title {
        height: 50px;
        line-height: 50px;
        color: #1e293b;
        font-size: 14px;
        
        i {
          color: #1e293b;
          margin-right: 8px;
          font-size: 18px;
        }
        
        &:hover, &:focus {
          background-color: #f8fafc;
          color: #00BFFF;
          
          i {
            color: #00BFFF;
          }
        }
        
        &.is-active {
          background-color: #f0f9ff;
          color: #00BFFF;
          
          i {
            color: #00BFFF;
          }
          
          &:hover {
            background-color: #f0f9ff;
          }
        }
      }
      
      .el-submenu {
        .el-menu {
          background-color: #ffffff;
          
          .el-menu-item {
            min-width: auto;
            height: 40px;
            line-height: 40px;
            padding-left: 48px !important;
            
            &:hover {
              background-color: #f8fafc;
            }
          }
        }
      }
    }
  }
}
</style>
